$border-color:  #e3e4e7;
$border-radius: 3px;

.react-autosuggest {
  position: relative;

  &--loading {

    .react-autosuggest {

      &__spinner {
        display: block;
      }

      &__suggestions-container {
        display: none;
      }
    }

  }


  &__container {
    position: relative;
    &--open {}
  }

  &__spinner {
    display: none;
    position: absolute;
    right: 1rem;
    top: 0.5rem;
    z-index: 2;
  }


  &__input {
    width: 100%;
    padding: 0.5rem 0.8rem;
    border: 1px solid $border-color;
    border-radius: $border-radius;
    -webkit-appearance: none;

    &::-ms-clear {
      display: none;
    }

    &--open {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }

    &--focused {
      outline: none;
    }

  }


  &__suggestions-container {
    display: none;

    &--open {
      display: block;
      position: absolute;
      top: 31px;
      width: 100%;
      border: 1px solid $border-color;
      background-color: #fff;
      border-bottom-left-radius: $border-radius;
      border-bottom-right-radius: $border-radius;
      z-index: 2;
    }

  }

  &__suggestions-list {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }

  &__suggestion {
    cursor: pointer;
    padding: 0.5rem 0.8rem;
    border-top: 1px solid #ddd;

    &--first {
      border-top: 0;
    }

    &--highlighted {
      background-color: $brand-primary;
      color: #fff;
    }

  }

}

// @border-color: #aaa;
// @border-radius: 4px;

// .container {
//   position: relative;
// }

// .input {
//   width: 240px;
//   height: 30px;
//   padding: 10px 20px;
//   font-family: 'Open Sans', sans-serif;
//   font-weight: 300;
//   font-size: 16px;
//   border: 1px solid @border-color;
//   border-radius: @border-radius;
//   -webkit-appearance: none;

//   &::-ms-clear {
//     display: none;
//   }
// }

// .inputOpen {
//   border-bottom-left-radius: 0;
//   border-bottom-right-radius: 0;
// }

// .inputFocused {
//   outline: none;
// }

// .suggestionsContainer {
//   display: none;
// }

// .suggestionsContainerOpen {
//   display: block;
//   position: absolute;
//   top: 51px;
//   width: 280px;
//   border: 1px solid @border-color;
//   background-color: #fff;
//   font-family: 'Open Sans', sans-serif;
//   font-weight: 300;
//   font-size: 20px;
//   border-bottom-left-radius: @border-radius;
//   border-bottom-right-radius: @border-radius;
//   z-index: 2;
// }

// .suggestionsList {
//   margin: 0;
//   padding: 0;
//   list-style-type: none;
// }

// .suggestion {
//   cursor: pointer;
//   padding: 10px 20px;
//   height: 48px;
//   border-top: 1px solid #ddd;
// }

// .suggestionFirst {
//   border-top: 0;
// }

// .suggestionHighlighted {
//   background-color: #0C7EAF;
//   color: #fff;
// }

// .suggestionContent {
//   display: flex;
//   align-items: center;
//   background-repeat: no-repeat;

//   &.dancounsell {
//     background-image: url(../CustomRender/photos/dancounsell.jpg);
//   }

//   &.ladylexy {
//     background-image: url(../CustomRender/photos/ladylexy.jpg);
//   }

//   &.mtnmissy {
//     background-image: url(../CustomRender/photos/mtnmissy.jpg);
//   }

//   &.steveodom {
//     background-image: url(../CustomRender/photos/steveodom.jpg);
//   }
// }

// .name {
//   margin-left: 68px;
//   line-height: 45px;
// }

// .highlight {
//   color: #ee0000;
//   font-weight: 400;

//   .suggestionHighlighted & {
//     color: #120000;
//   }
// }
